import React from 'react'
import {connect} from 'react-redux'
import { Form, Select, message, Switch, Button, Input } from 'antd';
import {messages} from "share/common";
import interfaceService from "containers/financial-account/interface-definition/interface-service";
const FormItem = Form.Item;
const Option = Select.Option;
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14},
};

class creditRule extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      record: {},
      saveLoading: false
    }
  }

  componentWillMount() {

  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.showSlideFrame === this.props.showSlideFrame)
      return;
    if (!nextProps.showSlideFrame) {
      this.props.form.resetFields();
      return !1;
    }
    this.props.form.resetFields();
    this.setState({ record: nextProps.editRecord });
  }

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err,values) => {
      if(!err){
        const { record } = this.state;
        const { user, debit } = this.props;
        record.id && (values.id = record.id);
        values.dcDefineId = debit.id;
        let name = Object.keys(record).length > 0 ? 'updateDebitDetail' : 'addDebitDetail';
        this.setState({saveLoading: true});
        interfaceService[name](values,user.userOID).then(() => {
          this.setState({saveLoading: false});
          this.props.close(true);
        }).catch(e => {
          this.setState({saveLoading: false});
          message.error(e.response.data.message);
        })
      }
    })
  };

  render(){
    const { record, saveLoading } = this.state;
    const { getFieldDecorator } = this.props.form;
    return(
      <div>
        <Form style={{marginTop:'10px'}}>
          <FormItem label={messages('financial-account.key58')/*方向性质*/} {...formItemLayout}>
            {getFieldDecorator('direction', {
              rules: [{
                required: true, message: messages('common.please.select')/*请选择*/,
              }],
              initialValue: record.direction ? record.direction.toString() : ''
            })(
              <Select placeholder={messages('common.please.select')/*请选择*/}>
                <Option key={1001} title={messages('financial-account.key59')/*借*/}>{messages('financial-account.key59')/*借*/}</Option>
                <Option key={1002} title={messages('financial-account.key60')/*贷*/}>{messages('financial-account.key60')/*贷*/}</Option>
              </Select>
            )}
          </FormItem>
          <FormItem label={messages('financial-account.key61')/*方向编码*/} {...formItemLayout}>
            {getFieldDecorator('directionCode', {
              rules: [{
                required: true, message: messages('common.please.enter')/*请输入*/,
              }],
              initialValue: record.directionCode
            })(
              <Input placeholder={messages('common.please.enter')/*请输入*/} disabled={record.directionCode ? true :false}/>
            )}
          </FormItem>
          <FormItem label={messages('financial-account.key62')/*方向名称*/} {...formItemLayout}>
            {getFieldDecorator('directionName', {
              rules: [{
                required: true, message: messages('common.please.enter')/*请输入*/,
              }],
              initialValue: record.directionName
            })(
              <Input placeholder={messages('common.please.enter')/*请输入*/}/>
            )}
          </FormItem>
          <FormItem label={messages('common.column.status')/*状态*/} {...formItemLayout}>
            {getFieldDecorator('isEnable',{
              initialValue: typeof record.isEnable === "boolean" ? record.isEnable : true,
              valuePropName: 'checked'
            })(
              <Switch/>
            )}
          </FormItem>
        </Form>
        <div className="footer-operate" style={{backgroundColor:'#ffffff',left:'0px'}}>
          <Button type="primary"  onClick={this.handleSave} style={{margin:'0px 10px'}} loading={saveLoading}>{messages('common.save')/*保存*/}</Button>
          <Button onClick={this.props.close}>{messages('common.cancel')/*取消*/}</Button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    user: state.login.user,
    debit: state.financialAccount.debit
  }
}

const wrappedCreditRule = Form.create()(creditRule);
export default connect(mapStateToProps)(wrappedCreditRule);
